<template>
    <div>
        <span>文件管理</span>
        <br>

        <el-dialog title="文件上传" :visible.sync="open" width="900px" append-to-body>
            <el-input v-model="form.type" placeholder="请输入文件类型"></el-input>
            <br><br><br>
            <el-upload
                    ref="upload"
                    style="display: inline"
                    drag
                    action=""
                    :before-upload="beforeUploadHandle"
                    :http-request="handleUploadForm"
                    :auto-upload="false"
                    multiple
                    :limit="1">
                <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link>
            </el-upload>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFile">确 定</el-button>
                <el-button @click="open=false">取 消</el-button>
            </div>
        </el-dialog>

        <el-button type="primary" @click="open=true" style="display: flex">文件上传</el-button>


        <el-table
                :data="fileList"
                style="width: 100%">
            <el-table-column
                    prop="fileName"
                    label="文件名"
                    width="180">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="fileUrl"
                    label="文件链接"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="文件类型"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            style="margin-right: 10px"
                            type="primary"
                            size="mini"
                            @click="handleDownload(scope.row)">下载</el-button>
                    <el-popconfirm title="确定删除该文件吗？" @confirm="handleDelete(scope.row)">
                        <el-button
                                slot="reference"
                                type="danger"
                                size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: "file",
    data () {
        return {
            form:{
                type:''
            },
            open: false,
            uploadUrl:'',
            fileList:[],
            show: false
        }
    },
    created() {
        this.getFileList();
    },
    methods:{
        addFile(){
            //手动提交
            this.$refs.upload.submit();
        },
        handleUploadForm(param) {
            console.log(this.form.type);
            let thisInfo = this
            let formData = new FormData()
            // 在formData中加入我们需要的参数
            formData.append('file', param.file)
            formData.append('type', this.form.type)

            // 向后端发送数据
            thisInfo.$axios.post('/myapi/Qiniu/upload', formData).then((res) => {
                if (res.data.success === true) {
                    thisInfo.$message.success('文件上传成功');
                    thisInfo.open = false;
                    thisInfo.getFileList();
                } else {
                    thisInfo.$message.success('文件上传失败')
                }
                thisInfo.formFileList = []
                thisInfo.uploadFormFileList = []
            })
        },

        beforeUploadHandle(file) {
/*            if (file.type !== "pdf") {
                this.$message.error("只支持pdf文件！");
                return false;
            }
            return true;*/
        },

        handleDownload(row){
            let url = row.fileUrl;
            window.open("http://"+url);
/*			console.log("url---------------"+url);
			const ele = document.createElement('a');
			ele.setAttribute('href', "http://"+url);
			ele.setAttribute('download',"val.name");
			ele.style.display = 'none';
			document.body.appendChild(ele);
			ele.click();
			document.body.removeChild(ele);*/

        },
        handleDelete(row){
            let vm = this;
            this.axios({
                url: '/myapi/Qiniu/delete/'+row.fileName,
                method: 'delete'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    vm.getFileList();
                }
                else {
                    vm.$message.error('删除失败');
                }
            });
        },
        getFileList(){
            let vm = this;
            this.axios({
                url: '/myapi/Qiniu/fileList',
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    vm.fileList = response.data.content;
                    console.log(vm.fileList);
                }
                else {
                    vm.$message.error('获取文件列表失败');
                }
            });
        }
    }
}
</script>

<style scoped>

</style>
